<template>
	<scroll-view scroll-y direction="vertical" class="safe">
		<view
			style="height: 300rpx;width: 100%;border-radius: 0 0 30rpx 30rpx;box-sizing: border-box;background-color: #ffffff;padding: 36rpx;display: flex;justify-content: space-between;align-items: flex-start;flex-direction: column;">
			<view v-if="product"
				style="font-size: 28rpx;display: flex;align-items: center;justify-content: flex-start;gap: 20rpx;width: 100%;height: 80rpx;">
				<image :src="product.imageUrl" style="height: 80rpx;width: 80rpx;" />
				<text style="flex: 1;">{{product.name}} {{info.amount}}元</text>
				<text @click="this.$refs.popup.open()">更改面值</text>
			</view>
			<view v-if="info"
				style="height: 90rpx;width: 100%;display: flex;align-items: flex-end;justify-content: flex-start;vertical-align: baseline;">
				<text style="margin-right: 10rpx;font-size: 60rpx;height: 90rpx;line-height: 70rpx;">¥</text>
				<view style="font-size: 90rpx;margin-right: 20rpx;height: 90rpx;line-height: 90rpx;">
					{{info.recyclePrice}}
				</view>
				<view
					style="color: #62748E;font-size: 28rpx;display: flex;align-items: center;justify-content: center;height: 35rpx;"
					@click="shuoming">
					价格说明<image src="/static/icon/wenhao.png" style="height: 32rpx;width: 32rpx;margin-left: 15rpx;">
					</image>
				</view>
			</view>
		</view>
		<view class="box" v-if="product && info">
			<view class="title">填写卡券信息</view>
			<template v-for="(item,index) in list" :key="index">
				<view style="height: 40rpx;line-height: 40rpx;font-size: 28rpx;margin-top: 36rpx;">{{product.name}}
					{{info.amount}}元 第{{index+1}}张
				</view>
				<view class="input_box">
					<view class="input_item" v-if="product.needCardNumber==1" style="border-bottom: 1px solid #E2E8F0;">
						卡号<input placeholder="请输入充值卡号" maxlength="30" v-model="item.cardNo" @input="inputChange" />
					</view>
					<view class="input_item">
						卡密<input placeholder="请输入充值卡密" maxlength="30" v-model="item.cardPwd" @input="inputChange" />
					</view>
				</view>
			</template>
			<view v-if="list.length<10" @click="list.push({cardNo:null,cardPwd:null})"
				style="background-color: #FFDF20;margin-top: 36rpx;width: 100%;border-radius: 20rpx;display: flex;align-items: center;justify-content: center;font-size: 30rpx;height: 100rpx;">
				<image src="/static/icon/jiahao_cu.png" style="margin-right: 10rpx;height: 32rpx;width: 32rpx;" />再添加一张
			</view>
		</view>
		<view class="box">
			<image src="/static/sell/card.png" mode="widthFix" style="height: auto;width: 100%;"></image>
			<view class="title" style="margin-top: 30rpx;">用户须知</view>
			<view class="tips">
				<view></view>
				<view>
					请按照页面上的提示选择，选择正确的充值卡信息。因面值错误产生的损失，由您自行承担。若提交的面值小于实际面值，<text>如：提交面值为100元、卡密实际面值为200元，则按100面值结算。</text>
					若提交的面值大于实际面值，<text>如：提交面值为200元、卡密实际面值为100元，则不结算。</text></view>
			</view>
			<view class="tips">
				<view></view>
				<view>提交前仔细核对充值卡/卡券，卡号，卡密正确无误，提交错误信息将无法兑换成功。</view>
			</view>
			<view class="tips">
				<view></view>
				<view>为了保证您的账户安全，应有关部门要求，卡券回收需进行实名认证。</view>
			</view>
			<view class="tips">
				<view></view>
				<view>请确保卡券来源合法，拒绝一切通过非法手段获取的卡券，一经发现异常情况，将报司法机关追究法律责任。</view>
			</view>
			<view class="tips">
				<view></view>
				<view>平台24小时可提交订单，可随时提现，系统自动处理。</view>
			</view>
		</view>
		<view style="height: 36rpx;width: 100%;"></view>
	</scroll-view>
	<!-- #ifdef MP-WEIXIN -->
	<view class="bottom_box safe">
		<view @click="customerService"
			style="width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: space-between;flex-direction: column;font-size: 24rpx;margin-left: 36rpx;">
			<image src="/static/icon/kefu.png" style="height: 50rpx;width: 50rpx;" />联系客服
		</view>
		<view class="btn btn1" v-if="submitStatus" @click="submit">提交订单</view>
		<view class="btn btn2" v-else>提交订单</view>
	</view>
	<!-- #endif -->
	<!-- #ifdef MP-ALIPAY -->
	<view class="bottom_box safe" style="justify-content: center;">
		<view class="btn btn1" style="width: 678rpx;margin: 0;" v-if="submitStatus" @click="submit">提交订单</view>
		<view class="btn btn2" style="width: 678rpx;margin: 0;" v-else>提交订单</view>
	</view>
	<!-- #endif -->
	<view class="jiageshuoming" v-if="jiageshuoming.show"
		:style="{'top':jiageshuoming.y+'px','left':jiageshuoming.x+'px'}">
		<view class="sanjian"></view>
		<view
			style="height: 36rpx;width: 100%;position: absolute;top: 0;left: 0;background-color: #ffffff;border-radius: 30rpx 30rpx 0 0;">
		</view>
		<view class="t">价格说明</view>
		<view class="c">当前回收报价是基于市场行情，平台实时对接多个服务商价格数据，智能比价后获取的市场最优价格。显示金额即为验证成功后钱包实收金额。</view>
		<view class="b" @click="jiageshuoming.show=false">我知道了</view>
	</view>
	<view class="success_box" v-if="success">
		<image src="/static/sell/success.png" mode="widthFix" style="width: 320rpx;margin-top: 200rpx;" />
		<view style="flex: 1;"></view>
		<view @click="success=false"
			style="background-color: #FFDF20;width: 670rpx;height: 100rpx;border-radius: 30rpx;font-size: 34rpx;text-align: center;line-height: 100rpx;margin-bottom: 40rpx;">
			再来一单</view>
		<navigator open-type="redirect" url="/pages/order_page/order_page"
			style="background-color: #ffffff;width: 670rpx;height: 100rpx;border-radius: 30rpx;font-size: 34rpx;margin-bottom: 200rpx;border: 1px solid #CAD5E2;box-sizing: border-box;display: flex;align-items: center;justify-content: center;">
			前往订单列表</navigator>
	</view>
	<view class="mask" v-if="shiming">
		<view class="dialog">
			<image src="/static/icon/close.png" class="close" @click="shiming=false" />
			<view class="content">为了保证您的账户安全，应有关部门要求，卡券回收需进行实名认证。</view>
			<view class="btn_box">
				<view @click="shiming=false">取消</view>
				<navigator url="/pages/account_security_center/account_security_center">前往认证</navigator>
			</view>
		</view>
	</view>
	<uni-popup ref="popup" type="bottom" background-color="#fff" :safe-area="false">
		<view style="height: 100vh;padding: 36rpx;box-sizing: border-box;width: 100%;"
			@click="this.$refs.popup.close()">
			<view v-if="product"
				style="font-size: 28rpx;display: flex;align-items: center;justify-content: flex-start;gap: 20rpx;width: 100%;height: 80rpx;">
				<image :src="product.imageUrl" style="height: 80rpx;width: 80rpx;" />
				<text style="flex: 1;">{{product.name}}</text>
				<text>更改面值</text>
			</view>
			<view class="price_box">
				<view @tap.stop="select(item)" :class="[item.id==faceValueId?'checked':'']" v-for="item in priceList"
					:key="item.id">
					<text>{{item.amount}}元</text>
					<text>可卖{{item.recyclePrice}}元</text>
				</view>
			</view>
		</view>
	</uni-popup>
	<view class="mask" v-if="showMingpian" @click="showMingpian=false">
	</view>
	<view class="mingpian_box" :style="{'bottom':showMingpian?0:'-700rpx'}">
		<view
			style="display: flex;align-items: center;justify-content: flex-end;height: 112rpx;width: 100%;padding: 36rpx;box-sizing: border-box;">
			<image src="/static/icon/close.png" style="height: 40rpx;width: 40rpx;" @click="showMingpian=false">
			</image>
		</view>
		<view style="font-size: 35rpx;font-weight: bold;height: 60rpx;line-height: 60rpx;">卡券回收有疑问？</view>
		<view
			style="font-size: 28rpx;font-weight: bold;height: 60rpx;line-height: 60rpx;color: #777777;margin: 20rpx 0 40rpx 0;">
			长按识别二维码，添加专属顾问</view>
		<image src="https://cdn.meijingnet.cn/huishou/static/img/customer_service.png" show-menu-by-longpress
			mode="heightFix" style="height: 300rpx;" lazy-load />
	</view>
	<!-- #ifdef MP-ALIPAY -->
	<contact-button tnt-inst-id="WSS_OvWE" scene="SCE00308723" size="100rpx" />
	<!-- #endif -->
</template>
5
<script>
	import api from '@/utils/api.js';
	export default {
		data() {
			return {
				success: false,
				shiming: true,
				submitStatus: false,
				showMingpian: false,
				jiageshuoming: {
					show: false
				},

				info: null,
				product: null,
				faceValueId: null,
				priceList: [],
				list: [{
					cardNo: '',
					cardPwd: ''
				}]
			}
		},
		async onLoad(options) {
			let faceValueId = options.faceValueId;
			if (options.cardPwd) {
				this.list[0].cardPwd = options.cardPwd;
			}
			if (options.cardNo) {
				this.list[0].cardNo = options.cardNo;
			}
			await this.handle(faceValueId);
			this.inputChange();
		},
		onShow() {
			this.shiming = false;
			this.success = false;
		},
		methods: {
			customerService() {
				getApp().customerService(this);
			},
			select(item) {
				for (let i of this.priceList) {
					i.checked = false;
				}
				item.checked = true;
				this.faceValueId = item.id;
				this.info = item;
				this.list = [{
					cardNo: '',
					cardPwd: ''
				}];
				this.$refs.popup.close();
			},
			shuoming(res) {
				if (this.jiageshuoming.show) {
					return;
				}
				//【价格说明】的高度
				let h = uni.upx2px(36);
				//【价格说明】的宽度
				let w = uni.upx2px(160);
				//价格说明弹框的宽度
				let w2 = uni.upx2px(480);
				//价格说明弹框顶部三角形的高度
				let t = uni.upx2px(30);

				this.jiageshuoming = {
					show: true,
					x: res.currentTarget.offsetLeft - w2 / 2 + w / 2,
					y: res.detail.y + h / 2 + t,
				};
			},
			inputChange() {
				let submitStatus = false;
				for (let i of this.list) {
					if (i.cardPwd && (this.product.needCardNumber != 1 || i.cardNo)) {
						submitStatus = true;
						break;
					}
				}
				this.submitStatus = submitStatus;
			},
			async handle(faceValueId) {
				let categoryInfo = await getApp().getCategoryInfo();
				let faceValueMap = categoryInfo.faceValueMap;
				let categoryProductMap = categoryInfo.categoryProductMap;
				let info, product;

				for (let key in faceValueMap) {
					for (let i of faceValueMap[key]) {
						if (faceValueId == i.id) {
							info = i;
							this.priceList = faceValueMap[key];
							break;
						}
					}
				}

				for (let key in categoryProductMap) {
					for (let i of categoryProductMap[key]) {
						if (info.productId == i.id) {
							product = i;
						}
					}
				}
				this.info = info;
				this.product = product;
				this.faceValueId = faceValueId;
			},
			validatePassword(password) {
				return /^[0-9a-zA-Z!@#$%^&*()_+\-=\[\]{}|;:,.<>?]{4,}$/.test(password);
			},
			async submit() {
				let list = [];
				for (let i = 0; i < this.list.length; i++) {
					let item = this.list[i];
					if (this.product.needCardNumber == 1 && !this.validatePassword(item.cardNo)) {
						uni.showToast({
							title: '第' + (i + 1) + '张卡号格式错误',
							icon: 'none',
							duration: 1500
						})
						return;
					}
					if (!this.validatePassword(item.cardPwd)) {
						uni.showToast({
							title: '第' + (i + 1) + '张卡密格式错误',
							icon: 'none',
							duration: 1500
						})
						return;
					}
					if (item.cardPwd && ((this.product.needCardNumber == 1 && item.cardNo) || this.product
							.needCardNumber == 0)) {
						let data = {
							faceId: this.info.id,
							cardPwd: item.cardPwd.replace(/[^0-9a-zA-Z]/g, '')
						};
						if (this.product.needCardNumber) {
							data.cardNo = item.cardNo.replace(/[^0-9a-zA-Z]/g, '');
						}
						list.push(data);
					}
				}
				let e = await api.create_order(list);
				if (e.code == 200) {
					this.list = [{
						cardNo: '',
						cardPwd: ''
					}];
					this.success = true;
				} else if (e.code == 512) {
					this.shiming = true;
				}
			},
		}
	}
</script>

<style>
	scroll-view {
		position: absolute;
		top: 0;
		bottom: 140rpx;
		left: 0;
		width: 750rpx;
	}

	.jiageshuoming {
		width: 480rpx;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 30px 0px rgba(2, 6, 24, 0.02), 0px 5px 15px 0px rgba(2, 6, 24, 0.05), 0px 0px 2px 0px rgba(2, 6, 24, 0.1);
		border-radius: 30rpx;
		padding: 36rpx;
		position: absolute;
		box-sizing: border-box;
		position: absolute;
		z-index: 9999999;
	}

	.jiageshuoming .sanjian {
		background-color: #ffffff;
		height: 40rpx;
		width: 40rpx;
		border-radius: 10rpx 0 0 0;
		position: absolute;
		top: -15rpx;
		left: 220rpx;
		box-shadow: -5rpx -5rpx 30rpx 0px rgba(2, 6, 24, 0.02), -5rpx -5rpx 30rpx 0px rgba(2, 6, 24, 0.05), -5rpx -5rpx 30rpx 0px rgba(2, 6, 24, 0.1);
		transform: rotate(45deg);
	}

	.jiageshuoming .t {
		font-size: 34rpx;
		font-weight: bold;
		margin-bottom: 36rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	.jiageshuoming .c {
		font-size: 28rpx;
		line-height: 40rpx;
		margin-bottom: 36rpx;
	}

	.jiageshuoming .b {
		background-color: #FFDF20;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		border-radius: 20rpx;
	}

	.input_box {
		background-color: #F8FAFC;
		border-radius: 20rpx;
		width: 100%;
		min-height: 100rpx;
		padding: 0 36rpx;
		margin-top: 36rpx;
		box-sizing: border-box;
	}

	.input_box .input_item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		font-size: 30rpx;
	}

	.input_box .input_item input {
		margin-left: 50rpx;
		height: 100%;
		text-align: right;
		flex: 1;
	}

	.tips {
		margin-top: 36rpx;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		width: 100%;
		height: auto;
	}

	.tips view:first-child {
		height: 14rpx;
		width: 14rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		margin-top: 13rpx;
		flex-shrink: 0;
		background-color: #62748E;
	}

	.tips view:last-child {
		color: #62748E;
		font-size: 26rpx;
		line-height: 40rpx;
		flex: 1;
	}

	.tips view:last-child text {
		color: #020618;
	}

	.bottom_box {
		height: 140rpx;
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
	}

	.bottom_box .btn {
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		height: 100rpx;
		width: 500rpx;
		margin-right: 36rpx;
	}

	.bottom_box .btn1 {
		background: linear-gradient(108deg, #FEF9C2 0%, #FFDF20 50%, #FFDF20 100%), #FFDF20;
	}

	.bottom_box .btn2 {
		background-color: #CAD5E2;
		color: #ffffff;
	}

	.price_box {
		width: 100%;
		height: auto;
		display: grid;
		grid-template-columns: repeat(3, 200rpx);
		margin-top: 40rpx;
		row-gap: 39rpx;
		justify-content: space-between;
	}

	.price_box view {
		width: 200rpx;
		height: 130rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #F8FAFC;
	}

	.price_box view text:first-child {
		font-size: 28rpx;
		line-height: 35rpx;
	}

	.price_box view text:last-child {
		font-size: 22rpx;
		line-height: 25rpx;
		color: #62748E;
		margin-top: 10rpx;
	}

	.price_box .checked {
		background-color: #FFDF20;
	}

	.price_box .checked text {
		color: #020618 !important;
	}

	.success_box {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgba(255, 255, 255, 0.9);
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		z-index: 999999;
	}
</style>